<template>
	<section class="brandEdit wrapper">
		<el-form label-position="right" class="demo-form-inline" :rules="rules" :model="brandDetail" ref="brandDetail"
             label-width="100px">
            <el-row style="width:100%">
		        <h4 style="margin-top: 0">联系人基本信息</h4>
		    </el-row>
		    
		    <el-row class="inline-row">
		        <el-col :span="8">
		          <el-form-item label="联系人姓名:" prop="contactName">
		            <el-input v-model="brandDetail.contactName" style="width: 220px" size="small"></el-input>
		          </el-form-item>
		        </el-col>
		    </el-row>
		
		    <el-row class="inline-row">
		        <el-col :span="8">
		          <el-form-item label="手机号码:" prop="contactTel">
		            <el-input v-model="brandDetail.contactTel"  style="width: 220px" size="small"></el-input>
		          </el-form-item>
		        </el-col>
		    </el-row>
		    
		    <el-row class="inline-row">
		        <el-col :span="8">
		          <el-form-item label="办公电话:" prop="phone">
		            <el-input v-model="brandDetail.phone" placeholder="办公电话" style="width: 220px" size="small"></el-input>
		          </el-form-item>
		        </el-col>
		    </el-row>
		
		    <el-row class="inline-row">
		        <el-col :span="8">
		          <el-form-item label="QQ:" prop="qq">
		            <el-input v-model="brandDetail.qq" placeholder="QQ" style="width: 220px" size="small"></el-input>
		          </el-form-item>
		        </el-col>
		    </el-row>
		    <el-row style="width:100%">
		        <h4 style="margin-top: 0">维权通服务</h4>
		    </el-row>
		    <el-row style="width:100%;margin-bottom: 22px;">
		        <el-col :span="8">
		          <el-checkbox v-model="brandDetail.checkedComplaint">投诉服务</el-checkbox>
		        </el-col>
		    </el-row>
		    <div class="service" v-if='brandDetail.checkedComplaint===true'>
		    	<el-row class="inline-row">
			        <el-col :span="12">
			          <el-form-item label="是否有价格表:">
	                    <el-radio v-model="isPriceState" class="radio" label="1">是</el-radio>
	                    <el-radio v-model="isPriceState" class="radio" label="0">否</el-radio>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="12">
			          <el-form-item label="是否有白名单:">
	                    <el-radio v-model="isWhiteState" class="radio" label="1">是</el-radio>
	                    <el-radio v-model="isWhiteState" class="radio" label="0">否</el-radio>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="8">
			          <el-form-item label="投诉账号:" prop="account">
			            <el-input v-model="brandDetail.account"  style="width: 220px" size="small"></el-input>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="8">
			          <el-form-item label="投诉密码:" prop="pwd">
			            <el-input v-model="brandDetail.pwd"  style="width: 220px" size="small"></el-input>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="8">
			          <el-form-item label="投诉账号邮箱密码:" prop="emailPwd">
			            <el-input v-model="brandDetail.emailPwd"  style="width: 220px" size="small"></el-input>
			          </el-form-item>
			        </el-col>
			    </el-row>
			    <el-row class="inline-row">
			        <el-col :span="8">
			          <el-form-item label="投诉账号验证手机:" prop="cellPhone">
			            <el-input v-model="brandDetail.cellPhone"  style="width: 220px" size="small"></el-input>
			          </el-form-item>
			        </el-col>
			    </el-row>
		    </div>
		    <el-row style="width:100%;margin-bottom: 22px;">
		        <el-col :span="8">
		          <el-checkbox v-model="brandDetail.checkedData">数据服务</el-checkbox>
		        </el-col>
		    </el-row>
		    
		    <el-row class="action_row" >
		        <el-col :span="12">
		          <el-button type="primary" class="top_save" @click="onSubmit('brandDetail')" :disabled="!(brandDetail.checkedComplaint||brandDetail.checkedData)" size="small"><i class="fa fa-save"></i> 保存</el-button>
		        </el-col>
		        <el-col :span="12">
		          <el-button type="danger" class="top_close" @click="close" size="small"><i class="fa fa-sign-out"></i> 退出</el-button>
		        </el-col>
		    </el-row>
        </el-form>
	</section>
</template>

<script>
	import Vue from 'vue';
	import {mapGetters} from 'vuex';
	import {Form,Row,Col,FormItem,Input,Checkbox,Radio,Button,Message} from 'element-ui'
	import {validTel ,checkQQ,validEmail} from '../../utils/auth'
	
	Vue.use(Form)
	Vue.use(Row)
	Vue.use(Col)
	Vue.use(FormItem)
	Vue.use(Input)
	Vue.use(Checkbox)
	Vue.use(Radio)
	Vue.use(Button)
	
	Vue.prototype.$message = Message;
	export default {
		head(){
	        return {
	            title: "修改维权通服务",
	            meta: [
	                { hid: 'edit-brand', name: 'edit-brand', content: 'edit-brand' }
	            ]
	        }
	    },
	    data(){
	    	
	    	var validateContactName = (rule, value, callback) => {
		        if(!value) {
                    callback(new Error('联系人姓名不能为空'))
                }else{
                	callback()
                }
		    };
	    	
	    	var validateContactTel = (rule, value, callback) => {
		        if(!value){
		        	callback(new Error('手机号码不能为空'))
		        }else if( value && validTel(value)==false) {
                    callback(new Error('手机号码格式有误'))
                }else{
                	callback()
                }
		    };
		    var validatePhone = (rule, value, callback) => {
		    	var regPhone = /^0\d{2,3}-\d{7,8}$/
		        if( value && !regPhone.test(value)) {
                    callback(new Error('办公电话格式不正确'))
                }else{
                	callback()
                }
		    };
		    var validateQQ = (rule, value, callback) => {
		        if( value && checkQQ(value)==false) {
                    callback(new Error('QQ号不正确'))
                }else{
                	callback()
                }
		    };
		    var validateCellPhone = (rule, value, callback) => {
		        if( value && validTel(value)==false) {
                    callback(new Error('手机号码格式有误'))
                }else{
                	callback()
                }
		    };
	    	
	    	return{
	    		brandId:'',
	    		tabName: '修改维权通服务',
	    		isPriceState:'0',
    			isWhiteState:'0',
	    		brandDetail:{
	    			contactName:'',
	    			contactTel:'',
	    			phone:'',
	    			qq:'',
	    			account:'',
	    			pwd:'',
	    			emailPwd:'',
	    			cellPhone:'',
	    			checkedComplaint:false,
	    			checkedData:false,
	    			show:false,
	    		},
	    		
	    		
	    		rules: {
	    			contactName:[
	    				{required: true,validator: validateContactName, trigger: 'blur'}
	    			],	
	    			contactTel:[
	    				{required: true,validator: validateContactTel, trigger: 'blur'}
	    			],
	    			phone:[
	    				{validator: validatePhone, trigger: 'blur'}
	    			],
	    			qq:[
	    				{validator: validateQQ, trigger: 'blur'}
	    			],
		          	cellPhone: [
		            	{validator: validateCellPhone, trigger: 'blur'}
		          	]
		        },
	    	}
	    },
	    computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            }),
		},
	    
	    mounted(){
			this.getUrl()
			this.getBrandDetailInfo()
		},
	    
	    methods: {
	    	onSubmit(formName) {
	    		let Info={
	          		'contactorName':this.brandDetail.contactName,
	          		'contactTel':this.brandDetail.contactTel,
	          		'contactPhone':this.brandDetail.phone,
	          		'qq':this.brandDetail.qq,
	          		'brandId':Number(this.brandId),
	          		'appealFlag':this.brandDetail.checkedComplaint == true ? 1 : 0,
	          		'priceTableFlag':Number(this.isPriceState),
	          		'whiteListFlag':Number(this.isWhiteState),
	          		'appealAccount':this.brandDetail.account,
	          		'appealPasswd':this.brandDetail.pwd,
	          		'appealEmailPasswd':this.brandDetail.emailPwd,
	          		'appealMobile':this.brandDetail.cellPhone,
	          		'dataStatus':this.brandDetail.checkedData == true ? 1 : -1
	          	}
		        this.$refs[formName].validate((valid) => {
			          if (valid) {
			          	this.$store.dispatch('updateMaintenanceRightInfo',Info)
			          		.then((response)=>{
			          			if(response.data.successed==true){
			          				this.$message({
								        message: '保存成功',
								        type: 'success'
							       	});
						            this.$router.push({path: '/brandadmin'});
			          			}
							})
						
			          }
		        });
		    },
	    	close() {
		        window.history.go(-1);
		    },
		    
		    
		    getBrandDetailInfo(){
		    	this.$store.dispatch('brandDetailInfo',{brandId:this.brandId})
					.then((response)=>{
						if(response.data){
							let result = response.data;
        					if(result.successed == true){
	                            if(result.data){
	                            	//pageTab
		                            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
		                                let arr = this.pageTabsList;
		                                arr[arr.length-1].name = result.data.brandName;
		                                this.$store.commit('PAGETABSLIST',{data:arr})
		                            }
	                            	this.brandDetail.contactName=result.data.contactorName
	                            	this.brandDetail.contactTel=result.data.contactTel
	                            	this.brandDetail.phone=result.data.contactPhone
	                            	this.brandDetail.qq=result.data.qq
	                            	
	                            	if(result.data.appealFlag==1){
	                            		this.brandDetail.checkedComplaint=true
	                            	}else if(result.data.appealFlag==0){
	                            		this.brandDetail.checkedComplaint=false
	                            	}
	                            	this.isPriceState=String(result.data.priceTableFlag)
	                            	this.isWhiteState=String(result.data.whiteListFlag)
	                            	this.brandDetail.account=result.data.appealAccount
	                            	this.brandDetail.pwd=result.data.appealPasswd
	                            	this.brandDetail.emailPwd=result.data.appealEmailPasswd
	                            	this.brandDetail.cellPhone=result.data.appealMobile
	                            	
	                            	if(result.data.dataStatus==1){
	                            		this.brandDetail.checkedData=true
	                            	}else if(result.data.dataStatus==-1){
	                            		this.brandDetail.checkedData=false
	                            	}
	                            }
	                        }
        				}
					})
					.catch((error) => {
        				Message.error('数据不存在');
                    })
		    },
		    
		    //取Url参数
			getUrl() {
			    var url = location.search; 
			    var theRequest = new Object();
			    if (url.indexOf("?") != -1) {
			        var str = url.substr(1);
			        var strs = str.split("&");
			        for(var i = 0; i < strs.length; i ++) {
			            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			        }
			    }
		    	this.brandId=theRequest.id
			}
		    
	    }
	}
</script>

<style  lang="scss">
	.brandEdit{
		.demo-form-inline{
			min-width: 800px;
    		max-width: 1000px;
		}
		h4 {
	    	color: #008dd8
	  	}
	  	.inline-row{
		    width: 50%;
		    display: inline-block;
		}
		.action_row {
		    width: 80%;
		    float: left;
		    margin-top: 20px;
		    .top_close{
			    float: left;
			    margin-left: 40px;
		    }
		    .top_save {
			    float: right;
			    margin-right: 40px;
		    }
		}
		.el-form-item__label{
			width: 150px !important;
		}
		.el-form-item__content{
			margin-left: 150px !important;
		}
		.el-form-item__error{
			width: 170px;
		}
	}
</style>